<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>任务管理</title>
    <link rel="stylesheet" href="../styles/taskManager.css">
</head>
<body>
    <div class="task-manager-container">
        <h2>任务管理</h2>
        
        <div class="task-form-section">
            <h3>添加/编辑任务</h3>
            <form id="task-form">
                <input type="hidden" id="task-id">
                <div class="form-group">
                    <label for="task-title">任务标题 *</label>
                    <input type="text" id="task-title" placeholder="输入任务标题" maxlength="100" required>
                </div>
                
                <div class="form-group">
                    <label for="task-description">任务描述</label>
                    <textarea id="task-description" placeholder="输入任务描述" rows="3" maxlength="500"></textarea>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
            <label for="task-priority">优先级</label>
            <select id="task-priority">
                <option value="low">低</option>
                <option value="medium" selected>中</option>
                <option value="high">高</option>
            </select>
        </div>

        <div class="form-group">
            <label for="task-due-date">截止日期</label>
            <input type="date" id="task-due-date">
        </div>

        <div class="form-group">
            <label for="task-hours">工时（小时）</label>
            <input type="number" id="task-hours" min="0" step="0.5" placeholder="输入工时">
        </div>
                </div>
                
                <div class="form-group">
                    <label for="task-status">状态</label>
                    <select id="task-status">
                        <option value="pending">待办</option>
                        <option value="in-progress">进行中</option>
                        <option value="completed">已完成</option>
                    </select>
                </div>
                
                <div class="form-actions">
                    <button type="submit" id="save-task-btn">保存任务</button>
                    <button type="button" id="cancel-task-btn">取消</button>
                </div>
            </form>
        </div>
        
        <div class="task-list-section">
            <h3>任务列表</h3>
            <div class="task-filters">
                <button class="filter-btn active" data-filter="all">全部</button>
                <button class="filter-btn" data-filter="pending">待办</button>
                <button class="filter-btn" data-filter="in-progress">进行中</button>
                <button class="filter-btn" data-filter="completed">已完成</button>
                <button class="filter-btn" data-filter="overdue">已逾期</button>
            </div>
            
            <div class="task-stats">
                <span>总计: <span id="total-tasks">0</span></span>
                <span>待办: <span id="pending-tasks">0</span></span>
                <span>进行中: <span id="in-progress-tasks">0</span></span>
                <span>已完成: <span id="completed-tasks">0</span></span>
            </div>
            
            <ul id="task-list-container">
                <!-- 任务将通过JavaScript动态添加 -->
            </ul>
        </div>
        
        <div class="task-actions">
            <button id="close-task-manager">关闭</button>
        </div>
    </div>
    
    <script src="../src/taskManagerRenderer.js"></script>
</body>
</html>